<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Title</title>
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="lib/element-ui/index.css">
    <link rel="stylesheet" href="css/cities.css">
</head>
<body style="padding: 66px;">
<div id="app" class="main-wrapper">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="选择城市">
            <city-select v-model="searchForm.cityId"></city-select>
        </el-form-item>
        <el-form-item label="时间">
            <el-date-picker v-model="searchForm.currentTime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" clearable type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
    </el-form>

    <el-button type="primary" icon="el-icon-success" @click="select">广州</el-button>
    <el-button type="primary" icon="el-icon-success" @click="clear">清空</el-button>

    {{cityId}}
</div>

<template class="city-select-template">
    <div class="city-select">
        <el-select v-model="provinceId" @change="onProvinceChanged" placeholder="省份">
            <el-option v-for="province in provinces" :label="province.name" :value="province.id" :key="province.Id"></el-option>
        </el-select>
        <el-select v-model="cityId" @change="onCityChanged" placeholder="城市">
            <el-option v-for="city in cities" :label="city.name" :value="city.id" :key="city.Id"></el-option>
        </el-select>
        <el-checkbox v-model="checkAll" @change="onCheckAllChanged">全国</el-checkbox>
    </div>
</template>
<script src="js/common/global.js"></script>
<script src="js/common/cache.js"></script>
<script src="lib/vue.js"></script>
<script src="lib/qs.js"></script>
<script src="lib/axios.js"></script>
<script src="js/common/axios-plugin.js"></script>
<script src="lib/jquery-3.5.1.js"></script>
<script src="lib/element-ui/index.js"></script>
<script src="js/service/api-data.js"></script>
<script>
    //const citySelectUrl = '/Api/KeyValue/GetProvinceGroups';
    const citySelect = {
        template: $('.city-select-template').html(),
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                checkAllCityId: 0,
                checkAll: true,
                provinces: [],
                cities: [],
                provinceId: '',
                cityId: '',
                history: {
                    provinceId: '',
                    cityId: '',
                },
            }
        },
        watch: {
            value(val) {
                this.inCityId(val);
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.checkAll = true;
                this.getProvinces();
            },
            inCityId(cityId) {
                //未改变
                if (this.cityId === cityId) {
                    return;
                }

                this.checkAll = false;
                if (cityId === 0) {
                    this.provinceId = '';
                    this.cityId = '';
                    this.checkAll = true;
                    return;
                }
                this.provinces.map(province => {
                    province.cities.map(city => {
                        if (city.id === cityId) {
                            this.cities = province.cities;

                            this.provinceId = province.id;
                            this.history.provinceId = province.id;

                            this.cityId = cityId;
                            this.history.cityId = cityId;
                        }
                    })
                })
            },
            onCityChanged(value) {
                if (!value) return;
                this.history.cityId = value;
                this.outCityId(this.cityId);
            },
            onProvinceChanged(value) {
                if (!value) return;
                this.history.provinceId = value;

                this.checkAll = false;
                let province = this.getProvince(value);
                this.cities = province.cities;
                this.setCityId(this.getDefaultCityId(province));
                this.outCityId(this.cityId);
            },
            onCheckAllChanged(value) {
                //选择全国, 置空城市
                if (value) {
                    this.provinceId = '';
                    this.cityId = '';
                    this.outCityId(this.checkAllCityId);
                } else {
                    if (this.history.provinceId > 0 && this.history.cityId > 0) {
                        this.setProvinceId(this.history.provinceId)
                        this.setCityId(this.history.cityId)
                    } else {
                        let province = this.provinces[0];
                        this.setProvinceId(province.id)
                        this.setCityId(this.getDefaultCityId(province))
                    }
                    this.outCityId(this.cityId);
                }
            },
            getDefaultCityId(province) {
                let cities = province.cities;
                let cityId = cities.length > 0 ? cities[0].id : '';
                return cityId;
            },
            setProvinceId(provinceId) {
                this.provinceId = provinceId;
                this.history.provinceId = provinceId;

                let province = this.getProvince(provinceId);
                this.cities = province.cities;
            },
            getProvince(provinceId) {
                let provinces = this.provinces, len = provinces.length;
                for (let i = 0; i < len; i++) {
                    let province = provinces[i];
                    if (province.id === provinceId) return province;
                }
                return {};
            },
            setCityId(cityId) {
                this.cityId = cityId;
                this.history.cityId = cityId;
            },
            outCityId(cityId) {
                this.$emit('change', cityId);
            },
            async getProvinces() {
                let provinces = await global.apiData.getProvinces();
                this.provinces = provinces;
            },
        }
    };
    const app = new Vue({
        el: "#app",
        components: {citySelect},
        data: {
            cityId: 0,
            searchForm: {
                cityId: 0,
                currentTime: ''
            }
        },
        methods: {
            select() {
                this.searchForm.cityId = 440100;
            },
            clear() {
                this.searchForm.cityId = 0;
            },
        }
    })

</script>
</body>
</html>